/* enum */
import ComponentNameEnum from "@model/enum/ComponentNameEnum";
/* vue */
import { defineComponent } from "vue";
/* scss */
import "@src/modules/setting/gpt/components/header.scss";
/* util */
import { getLocalesOssUrl } from '@src/util/assets'

const GptFullBackgroundImage = getLocalesOssUrl('/gpt-full-bg.png')
const GptBackgroundImage = getLocalesOssUrl('/gpt-bg.png')

export default defineComponent({
  name: ComponentNameEnum.SettingGPTViewHeader,
  props: {
    title: {
      type: String,
      default: "小宝AI"
    },
    subTitle: {
      type: String,
      default: ""
    }
  },
  computed: {
    attrs(): Record<string, any> {
      return {
        style: {
          backgroundImage: `url(${GptFullBackgroundImage})`
        }
      }
    }
  },
  render() {
    return (
      <div class="setting-gpt-view-header" {...this.attrs}>
        
        <div class="setting-gpt-view-header-left">
          
          <div class="setting-gpt-view-header-title">
            {this.title}
          </div>
          
          <div class="setting-gpt-view-header-sub-title">
            {/* @ts-ignore */}
            <span domPropsInnerHTML={this.subTitle}>
            </span>
          </div>
          
          <div class="setting-gpt-view-header-button">
            { this.$slots.button }
          </div>
          
        </div>
        
        <div class="setting-gpt-view-header-right">
          <img src={GptBackgroundImage} />
        </div>
        
      </div>
    )
  }
});